<template>
  <s-layout title="管理就诊人" :bgStyle="{ color: '#FFF' }">
    <view v-for="(item, index) in state.list" :key="index">
      <view
        class="address-item ss-flex ss-row-between ss-col-center"
        :class="[{ 'border-bottom': index != 2 }]"
        @click="choosePeople(item)"
      >
        <view class="item-left">
          <view class="address-text">{{ item.real_name }}</view>
          <view class="person-text">
            <view style="padding-right: 34rpx">{{ ['男', '女'][item.sex - 1] }}</view>
            <view style="padding-right: 24rpx">{{ item.age }}周岁</view>
            <view>{{ item.phone }}</view>
          </view>
        </view>
        <button class="ss-reset-button edit-btn" @tap.stop="goEdit(item)">
          <view class="edit-icon ss-flex ss-row-center ss-col-center">
            <image :src="sheep.$url.static('/assets/addons/shopro/uniapp/user/address/edit.png')">
            </image>
          </view>
        </button>
      </view>
    </view>

    <view class="goadd" @tap="goEdit()"> 添加就诊人 </view>

    <s-empty v-if="state.list.length === 0" text="暂无就诊人" icon="/static/data-empty.png" />
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { reactive, onBeforeMount } from 'vue';
  import { onShow } from '@dcloudio/uni-app';

  const state = reactive({
    list: [],
    loading: true,
  });
  const goEdit = (item) => {
    if (item) {
      sheep.$router.go('/pages/second/editPatient', {
        id: item.id,
        real_name: item.real_name,
        phone: item.phone,
        id_card: item.id_card,
        age: item.age,
        sex: item.sex,
      });
    } else {
      sheep.$router.go('/pages/second/editPatient');
    }
  };
  const choosePeople = (peopleInfo) => {
    console.log(peopleInfo, 'peopleInfopeopleInfo');
    uni.$emit('SELECT_PEOPLE', {
      peopleInfo,
    });
    sheep.$router.back();
  };

  const getList = () => {
    uni.showLoading();
    sheep.$api.second
      .patientList_api()
      .then((res) => {
        state.list = res.data;
      })
      .catch(() => {
        state.list = [];
      })
      .finally(() => {
        uni.hideLoading();
      });
  };
  onShow((options) => {
    getList();
  });
</script>

<style lang="scss" scoped>
  .address-item {
    padding: 42rpx 30rpx 30rpx;

    .item-left {
      width: 600rpx;
    }

    .area-text {
      font-size: 26rpx;
      font-weight: 400;
      color: $dark-9;
    }

    .address-text {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      line-height: 48rpx;
    }

    .person-text {
      font-size: 28rpx;
      font-weight: 400;
      color: #7e7e7e;
      display: flex;
      padding-top: 20rpx;
      font-size: 32rpx;
    }
  }

  .edit-btn {
    width: 44rpx;
    height: 44rpx;
    background: $gray-f;
    border-radius: 50%;

    .edit-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  image {
    width: 100%;
    height: 100%;
  }

  .goadd {
    position: fixed;
    bottom: 180rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 308rpx;
    height: 68rpx;
    line-height: 68rpx;
    text-align: center;
    background: linear-gradient(90deg, #ebac60 5%, #f3ca96 100%);
    box-shadow: 0rpx 6rpx 9rpx 0rpx rgba(246, 197, 138, 0.56);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 36rpx;
    color: #ffffff;
  }
</style>
